<template>
  <n-layout>
    <Navbar @scrollToSection="scrollToSection" />
    <n-layout-content >
      <Carousel style="margin-bottom: 5px !important"></Carousel>
      <div class="container marketing" id="interface-list"  >
        <TabContent ref="interfaceList" />
      </div>
    </n-layout-content>
    <Footer />
  </n-layout>
</template>

<script>
import Navbar from '@/components/Navbar.vue'
import Carousel from '@/components/Carousel.vue'
import TabContent from '@/components/TabContent.vue'
import Footer from '@/components/Footer.vue'
import { NLayout, NLayoutContent } from 'naive-ui'

export default {
  components: {
    Navbar,
    Carousel,
    TabContent,
    Footer,
    NLayout,
    NLayoutContent
  },
  setup() {},
  methods: {
    scrollToSection() {
      const targetSection = this.$refs.interfaceList.$el
      if (targetSection) {
        targetSection.scrollIntoView({ behavior: 'smooth' })
      }
    }
  }
}
</script>

<style>
@import '@/assets/bootstrap.min.css';
@import '@/assets/ie10-viewport-bug-workaround.css';
@import '@/assets/app.css';
</style>
